<template>

  <el-container class="allbody" onscroll="false">
    <el-header style="position:relative;height: 10.5%" class="headerbackgroud">
      <div style="color: white;font-size: 30px;text-align: center;margin-top: 20px;margin-left: 70px">特种设备检测监测云平台</div>
      <el-card style="width:150px;height:50px;text-align:left;margin-left:80px;margin-top:-30px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 6px;margin-top: -10px">
          大连特种设备工业有限公司
        </div>
      </el-card>
      <el-card style="width:126px;height:60px;align-items:right;margin-left:1600px;margin-top:-30px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 2px;margin-top: -8px">
          {{(dateFormat(date))}}
        </div>
      </el-card>
    </el-header>
    <el-main style="position:relative;height: 60%;background-image: url('../../../assets/bg.jpg')" data="list">
      <el-container style="height: 60%">
        <el-aside width="25%" class="frameDiv">

          <div class="frame">
            <div class="title">机电设备</div>
            <el-col class="panel-group">
              <el-col style="width: 100%;height: 50%">
                <el-container >
                  <div class="card-panel">
                    <div style="border: #4AB7BD 3px solid;border-radius: 10px" class="card-img">
                      <img style="margin-top: 5%;margin-left: 25%" src="../../../assets/image/起重机械.png">
                      <div style="margin-left: 25%" class="card-img-inf">起重机械</div>
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">
                        设备数量  <count-to :start-val="0" :end-val= "liftnum1" :duration="3000" class="card-panel-num" />  台
                      </div>
                      <div class="card-panel-text">
                        使用单位  <count-to :start-val="0" :end-val="liftnum2" :duration="3000" class="card-panel-num" />  家
                      </div>
                      <div class="card-panel-text">
                        制造企业  <count-to :start-val="0" :end-val="liftnum3" :duration="3000" class="card-panel-num" />家
                      </div>
                    </div>
                  </div>

                </el-container>
              </el-col>

              <el-col style="width: 100%;height: 50%">
                <el-container >
                  <div class="card-panel">
                    <div style="border: #4AB7BD 3px solid;border-radius: 10px" class="card-img">
                      <img style="margin-top: 5%;margin-left: 25%" src="../../../assets/image/电气控柜.png">
                      <div style="margin-left: 25%" class="card-img-inf">电气控柜</div>
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">
                        设备数量  <count-to :start-val="0" :end-val="30" :duration="3000" class="card-panel-num" />  台
                      </div>
                      <div class="card-panel-text">
                        使用单位  <count-to :start-val="0" :end-val="18" :duration="3000" class="card-panel-num" />  家
                      </div>
                      <div class="card-panel-text">
                        制造企业  <count-to :start-val="0" :end-val="18" :duration="3000" class="card-panel-num" />  家
                      </div>
                    </div>
                  </div>

                </el-container>
              </el-col>
            </el-col>
          </div>



        </el-aside>
        <el-main width="50%" style="z-index: 5">
          <el-row style=" margin-top:-2%;height:10%;width: 100%">
            <el-col span="3" style="width: 50%;border: #4AB7BD 3px solid;	box-shadow:0px 0px  10px 2px #9E9E9E;">
              <div style="margin-left: 10px" class="select">
                省份
                <el-select v-model="location" placeholder="请选择" style=" margin-left:40px;width: 300px" popper-append-to-body="false" class="hello">
                  <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col span="10" style="width: 50%;border: #4AB7BD 3px solid;	box-shadow:0px 0px  10px 2px #9E9E9E;">
              <div style="margin-left: 10px" class="select">
                城市 &nbsp;
                <el-select v-model="city" placeholder="请选择" style="margin-left:40px;width: 300px" popper-append-to-body="false" class="hello" >
                  <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>

          <el-row style="width: 100%;height: 10%">
            <el-col span="10" style="width: 50%;border: #4AB7BD 3px solid;	box-shadow:0px 0px  10px 2px #9E9E9E;">
              <div style="margin-left: 10px" class="select">
                机构
                <el-select v-model="enterprises" placeholder="请选择" style="margin-left:40px;width: 300px" popper-append-to-body="false" class="hello">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col span="10" style="width: 50%;border: #4AB7BD 3px solid;	box-shadow:0px 0px  10px 2px #9E9E9E;">
              <el-input v-model="keyword" placeholder="请输入设备具体地址" style="width: 300px;margin-left: 95px;" @input="change($event)" class="hello"></el-input>
            </el-col>


          </el-row>

          <el-row style="margin-top:1%;width: 100%;height:80%">

            <baidu-map  id="allmap" ref="allmap" center="安徽省" :zoom="zoom" :scroll-wheel-zoom="true" :map-style="mapStyle" ak="tMKUDeTdNWyNefPuZ5vLWHLr4k540dl2" @click="getPoint">
              <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>
              <bm-local-search :keyword="keyword"  zoom="12.8" style="display: none"></bm-local-search>
            </baidu-map>
          </el-row>

          <!--<vue-seamless-scroll :data="listData" :class-option="classOption" class="seamless-warp">-->

              <!--<li v-for="item in listData">-->
                <!--<span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span>-->
              <!--</li>-->

          <!--</vue-seamless-scroll>-->


        </el-main>


        <el-aside width="25%" class="frameDiv">
          <div class="frame">
            <div class="title">储运设备</div>
            <el-col class="panel-group">
              <el-col style="width: 100%;height: 50%">
                <el-container >
                  <div class="card-panel">
                    <div style="border: #4AB7BD 3px solid;border-radius: 10px" class="card-img">
                      <img style="margin-top: 5%;margin-left: 25%" src="../../../assets/image/原油储罐.png">
                      <div style="margin-left: 25%" class="card-img-inf">原油储罐</div>
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">
                        设备数量  <count-to :start-val="0" :end-val="152" :duration="3000" class="card-panel-num" />  台
                      </div>
                      <div class="card-panel-text">
                        使用单位  <count-to :start-val="0" :end-val="108" :duration="3000" class="card-panel-num" />  家
                      </div>
                      <div class="card-panel-text">
                        制造企业  <count-to :start-val="0" :end-val="58" :duration="3000" class="card-panel-num" />  家
                      </div>
                    </div>
                  </div>

                </el-container>
              </el-col>

              <el-col style="width: 100%;height: 50%">
                <el-container >
                  <div class="card-panel">
                    <div style="border: #4AB7BD 3px solid;border-radius: 10px" class="card-img">
                      <img style="margin-top: 5%;margin-left: 25%" src="../../../assets/image/油气管道.png">
                      <div style="margin-left: 25%" class="card-img-inf">油气管道</div>
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">
                        设备数量  <count-to :start-val="0" :end-val="0" :duration="3000" class="card-panel-num" />  台
                      </div>
                      <div class="card-panel-text">
                        使用单位  <count-to :start-val="0" :end-val="0" :duration="3000" class="card-panel-num" />  家
                      </div>
                      <div class="card-panel-text">
                        制造企业  <count-to :start-val="0" :end-val="0" :duration="3000" class="card-panel-num" />  家
                      </div>
                    </div>
                  </div>

                </el-container>
              </el-col>
            </el-col>
          </div>
        </el-aside>

      </el-container>
      <el-container style="height: 40%">
        <el-aside style="width: 100%;height:100%;margin-left: 0px"class="frameDiv2" onscroll="false">
          <div class="frame2">
            <div class="title2">承压设备</div>
            <el-row style="height: 100%;width: 100%" class="panel-group">

              <el-col style="width: 33%;">
                <el-container >
                  <div style="margin-left: 5%" class="card-panel">
                    <div style="border: #4AB7BD 3px solid;border-radius: 10px" class="card-img">
                      <img style="margin-top: 5%;margin-left: 25%" src="../../../assets/image/焦炭塔.png">
                      <div style="margin-left: 25%" class="card-img-inf">焦炭塔</div>
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">
                        设备数量  <count-to :start-val="0" :end-val="cokenum1" :duration="3000" class="card-panel-num" />  台
                      </div>
                      <div class="card-panel-text">
                        使用单位  <count-to :start-val="0" :end-val="cokenum2" :duration="3000" class="card-panel-num" />  家
                      </div>
                      <div class="card-panel-text">
                        制造企业  <count-to :start-val="0" :end-val="cokenum3" :duration="3000" class="card-panel-num" />  家
                      </div>
                    </div>
                  </div>

                </el-container>
              </el-col>

              <el-col style="width: 33%;">
                <el-container >
                  <div class="card-panel">
                    <div style="border: #4AB7BD 3px solid;border-radius: 10px" class="card-img">
                      <img style="margin-top: 5%;margin-left: 25%" src="../../../assets/image/电站锅炉.png">
                      <div style="margin-left: 25%" class="card-img-inf">电站锅炉</div>
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">
                        设备数量  <count-to :start-val="0" :end-val="281" :duration="3000" class="card-panel-num" />  台
                      </div>
                      <div class="card-panel-text">
                        使用单位  <count-to :start-val="0" :end-val="108" :duration="3000" class="card-panel-num" />  家
                      </div>
                      <div class="card-panel-text">
                        制造企业  <count-to :start-val="0" :end-val="38" :duration="3000" class="card-panel-num" />  家
                      </div>
                    </div>
                  </div>

                </el-container>
              </el-col>


              <el-col style="width: 33%;">
                <el-container >
                  <div class="card-panel">
                    <div style="border: #4AB7BD 3px solid;border-radius: 10px" class="card-img">
                      <img style="margin-top: 5%;margin-left: 25%" src="../../../assets/image/移动气瓶.png">
                      <div style="margin-left: 25%" class="card-img-inf">移动气瓶</div>
                    </div>
                    <div class="card-panel-description">
                      <div class="card-panel-text">
                        设备数量  <count-to :start-val="0" :end-val="gasnum1" :duration="3000" class="card-panel-num" />  台
                      </div>
                      <div class="card-panel-text">
                        使用单位  <count-to :start-val="0" :end-val="gasnum2" :duration="3000" class="card-panel-num" />  家
                      </div>
                      <div class="card-panel-text">
                        制造企业  <count-to :start-val="0" :end-val="gasnum3" :duration="3000" class="card-panel-num" />  家
                      </div>
                    </div>
                  </div>
                </el-container>
              </el-col>
            </el-row>
          </div>
        </el-aside>


      </el-container>

    </el-main>
    <el-footer style="position:relative;z-index: 5;height: 20%">
      <el-container style="height: 100%;width: 100%">
        <el-aside style="width: 100%;height: 90%;">
          <panel-group></panel-group>
        </el-aside>
      </el-container>
    </el-footer>
    <div class="map1"><img src="../../../assets/image/lbx.png"></div>
    <div class="map2"><img src="../../../assets/image/jt.png"></div>
    <div class="map3"><img src="../../../assets/image/map.png"></div>
    <vue-particles
        color="#0ff"
        :particleOpacity="0.7"
        :particlesNumber="80"
        shapeType="circle"
        :particleSize="3"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="false"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="2"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
        class="lizi"
      />
    <!--#粒子特效组件-->
  </el-container>
</template>

<script>
import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import RaddarChart from './components/RaddarChart'
import PieChart from './components/PieChart'
import BarChart from './components/BarChart'
import TodoList from './components/TodoList'
import BoxCard from './components/BoxCard'
import cokeTower_map from './components/cokeTower_map'
import HiddenTroubleStatisticsChart from './components/HiddenTroubleStatisticsChart'
import temperature from './components/monitor/temperature'
import strain from './components/monitor/strain'
import slope from './components/monitor/slope'
import vibration from './components/monitor/vibration'
import PieChart2 from './components/PieChart2'
//import imgUrl from '../../../assets/tower.png'
import backimgUrl from'../../../assets/screen-header.png'
import ElContainer from "element-ui/packages/container/src/main"
import ElAside from "element-ui/packages/aside/src/main"
import ElHeader from "element-ui/packages/header/src/main"
import ElMain from "element-ui/packages/main/src/main"
import LabelWrap from 'element-ui/packages/form/src/label-wrap'

import echarts from 'echarts'
import Vue from 'vue'
import CountTo from 'vue-count-to'

import { get, get as userType, del, dels } from '@/api/sys/connSysAuthApi'
import { parseTime } from '@/utils'
import { req } from '@/api/base/BaseApi'

import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
import BmLocalSearch from'vue-baidu-map/components/search/LocalSearch'

import PerfectScrollbar from 'perfect-scrollbar';
import vueSeamlessScroll from 'vue-seamless-scroll'
//对应的css
import "perfect-scrollbar/css/perfect-scrollbar.css";
Vue.prototype.$echarts = echarts
const el_scrollBar = (el) => {
  //在元素上加点私货，名字随便取，确保不会和已有属性重复即可，我取名叫做_ps_
  if (el._ps_ instanceof PerfectScrollbar) {
    el._ps_.update();
  } else {
    //el上挂一份属性
    el._ps_ = new PerfectScrollbar(el, { suppressScrollX: true });
  }
};

export default {
  name: 'DashboardAdmin',
  props:{
    title:String,
  },
  components: {
    LabelWrap,
    ElMain,
    ElHeader,
    ElAside,
    ElContainer,
    PieChart2,
    cokeTower_map,
    GithubCorner,
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    HiddenTroubleStatisticsChart,
    BarChart,
    TodoList,
    BoxCard,
    temperature,
    slope,
    strain,
    vibration,
    BaiduMap,
    BmScale,
    BmNavigation,
    BmMarkerClusterer,
    BmMarker,
    BmInfoWindow,
    BmLocalSearch,
    vueSeamlessScroll,
    CountTo
  },
  data() {
    return {
      imgUrl:null,
      backimgUrl:null,
      date: new Date(),
      keyword: '',  //搜索框关键词
      zoom: 12.8,   //放大比例
      //数量变量
      liftnum1:'',
      liftnum2:'',
      liftnum3:'',
      gasnum1:'',
      gasnum2:'',
      gasnum3:'',
      cokenum1:'',
      cokenum2:'',
      cokenum3:'',
      options1: [{
        value: '安徽省',
        label: '安徽省'
      }, {
        value: '辽宁省',
        label: '辽宁省'
      }, {
        value: '广东省',
        label: '广东省'
      }],
      location: '',
      options2: [{
        value: '铜陵市',
        label: '铜陵市'
      }],
      city: '',
      options: [{
        value: '铜陵市特种设备检测研究所',
        label: '铜陵市特种设备检测研究所'
      }],
      enterprises: '',
      list:[],
      mapStyle: {
        styleJson: [
          {
            "featureType": "land",
            "elementType": "geometry",
            "stylers": {
              "color": "#000532"
            }
          },
          {
            "featureType": "building",
            "elementType": "geometry",
            "stylers": {
              "color": "#0129e1"
            }
          },
          {
            "featureType": "highway",
            "elementType": "all",
            "stylers": {
              "lightness": -42,
              "saturation": -91
            }
          },
          {
            "featureType": "arterial",
            "elementType": "geometry",
            "stylers": {
              "lightness": -77,
              "saturation": -94
            }
          },
          {
            "featureType": "green",
            "elementType": "geometry",
            "stylers": {
              "color": "#2a4eeb"
            }
          },
          {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": {
              "color": "#001b84"
            }
          },
          {
            "featureType": "subway",
            "elementType": "geometry.stroke",
            "stylers": {
              "color": "#002dd1"
            }
          },
          {
            "featureType": "railway",
            "elementType": "geometry",
            "stylers": {
              "lightness": -52
            }
          },
          {
            "featureType": "all",
            "elementType": "labels.text.stroke",
            "stylers": {
              "color": "#313131"
            }
          },
          {
            "featureType": "all",
            "elementType": "labels.text.fill",
            "stylers": {
              "color": "#8b8787"
            }
          },
          {
            "featureType": "manmade",
            "elementType": "geometry",
            "stylers": {
              "color": "#1b1b1b"
            }
          },
          {
            "featureType": "local",
            "elementType": "geometry",
            "stylers": {
              "lightness": -75,
              "saturation": -91
            }
          },
          {
            "featureType": "subway",
            "elementType": "geometry",
            "stylers": {
              "lightness": -65
            }
          },
          {
            "featureType": "railway",
            "elementType": "all",
            "stylers": {
              "lightness": -40
            }
          },
          {
            "featureType": "boundary",
            "elementType": "geometry",
            "stylers": {
              "color": "#8b8787",
              "weight": "1",
              "lightness": -29
            }
          }
        ]
      },
      listData: [{
        'title': '无缝滚动第一行无缝滚动第一行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第二行无缝滚动第二行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第三行无缝滚动第三行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第四行无缝滚动第四行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第五行无缝滚动第五行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第六行无缝滚动第六行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第七行无缝滚动第七行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第八行无缝滚动第八行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第九行无缝滚动第九行',
        'date': '2017-12-16'
      }]
    }
  },
  mounted() {
    let _this = this //声明一个变量指向vue实例this,保证作用域一致
    this.timer = setInterval(function() {
      _this.date = new Date()//修改数据date
    }, 1000)
  },
  created(){
    req('/api/sys/auth/homePageData/allNum', 'POST', '').then(response => {
      this.list = response.data
      this.liftnum1=this.list[0][0].lift_device_num
      this.liftnum2=this.list[0][0].lift_use_num
      this.liftnum3=this.list[0][0].lift_make_num

      this.cokenum1=this.list[1][0].coke_device_num
      this.cokenum2=this.list[1][0].coke_use_num
      this.cokenum3=this.list[1][0].coke_make_num

      this.gasnum1=this.list[2][0].gas_device_num
      this.gasnum2=this.list[2][0].gas_use_num
      this.gasnum3=this.list[2][0].gas_make_num
      console.log(this.list)
    }).catch(() => console.log('page request error'))
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)//在vue实例销毁钱，清除我们的定时器
    }
  },
  computed: {
    classOption () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 0, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  methods: {
    dateFormat(time) {
      var date = new Date(time)
      var year=date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
       * */
      var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1
      var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate()
      var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours()
      var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes()
      var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds()
      // 拼接

      return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds
    },
    tableRowStyle({ row, rowIndex }) {
      return 'background-color: #02152f;color: #fff'
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #2ec7c9;color: #fff;font-weight: 500;'
      }
    },
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return 'background:#06134A;color:#0000ff;'
    },
    getPoint(e){    //点击地图获取一些信息，
      this.show = true;
      this.postionMap.lng = e.point.lng;     //通过  e.point.lng获取经度
      this.postionMap.lat = e.point.lat;     //通过  e.point.lat获取纬度
      this.add.jd = e.point.lng;
      this.add.wd = e.point.lat;
      this.zoom = e.target.getZoom()

      let geocoder= new BMap.Geocoder();  //创建地址解析器的实例
      geocoder.getLocation(e.point,rs=>{
        this.add.site = rs.address;
        //地址描述(string)=
        // console.log(rs.address);    //这里打印可以看到里面的详细地址信息，可以根据需求选择想要的
        // console.log(rs.addressComponents);//结构化的地址描述(object)
        // console.log(rs.addressComponents.province); //省
        // console.log(rs.addressComponents.city); //城市
        // console.log(rs.addressComponents.district); //区县
        // console.log(rs.addressComponents.street); //街道
        // console.log(rs.addressComponents.streetNumber); //门牌号
        // console.log(rs.surroundingPois); //附近的POI点(array)
        // console.log(rs.business); //商圈字段，代表此点所属的商圈(string)
      });
    },
    infoWindowClose () {
      this.show = false
    },
    infoWindowOpen () {
      //这里有个问题纠结了很久，百度的信息窗口默认有个点击其他地方就消失的事件，我没有找到
      //并且信息窗口点击一次显示，一次消失
      //于是我加了一个100毫秒的定时器，保证每次点击地图都可以展示信息窗口
      setInterval(()=>{
        this.show = true
      },100)
    },
    change(e){
      this.$forceUpdate()   //更新嵌套过深的输入框
    }
  }
}
</script>

<style lang="scss" scoped>
  .img {
    display: flex;
    justify-content: center;
    align-items: center;
    x:50px;
  }
  .allbody{
    width:1850px;
    height:1050px;
    background-image: url("../../../assets/bg.jpg");

  }
.headerbackgroud{
  background-image: url("../../../assets/screen-header.jpg");
}
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(73, 88, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.midText {
  position: absolute;
  left: 50%;
  background-color: #ffffff;
  padding: 0 15px;
  transform: translateX(-50%) translateY(-50%);
}
@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
  .frameDiv {
    position: relative;
    margin-right: 18px;
    //background:rgba(56,62,88,0.8);
    .frame {
      position: absolute;


      width: 95%;
      height:95%;

      box-shadow:0px 0px 9px 0px rgba(82,255,226,0.23) inset;
      background:
        linear-gradient(to left, #00CDA2, #00CDA2) left top no-repeat,
      linear-gradient(to bottom, #00CDA2, #00CDA2) left top no-repeat,
      linear-gradient(to left, #00CDA2, #00CDA2) right top no-repeat ,
      linear-gradient(to bottom, #00CDA2, #00CDA2) right top no-repeat,
      linear-gradient(to left, #00CDA2, #00CDA2) left bottom no-repeat,
      linear-gradient(to bottom, #00CDA2, #00CDA2) left bottom no-repeat,
      linear-gradient(to left, #00CDA2, #00CDA2) right bottom no-repeat,
      linear-gradient(to left, #00CDA2, #00CDA2) right bottom no-repeat;
      ;
      background-size: 18px 6px, 6px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title {
        margin-top: 5px;
        font-size:50px;
        font-family:Source Han Sans CN;
        font-weight:200;
        color:#00CDA2;
      }
      .num {
        font-size:26px;
        font-family:Source Han Sans CN;
        font-weight:500;
        color:rgba(0,205,162,1);
      }
    }
  }
  .frameDiv2 {
    position: relative;
    margin-right: 18px;
    //background:rgba(56,62,88,0.8);
    .frame2 {
      position: absolute;
      // top: -1px;
      // left: -1px;

      width: 98%;
      height:95%;

      box-shadow:0px 0px 9px 0px rgba(82,255,226,0.23) inset;
      background:
        linear-gradient(to left, #00CDA2, #00CDA2) left top no-repeat,
        linear-gradient(to bottom, #00CDA2, #00CDA2) left top no-repeat,
        linear-gradient(to left, #00CDA2, #00CDA2) right top no-repeat ,
        linear-gradient(to bottom, #00CDA2, #00CDA2) right top no-repeat,
        linear-gradient(to left, #00CDA2, #00CDA2) left bottom no-repeat,
        linear-gradient(to bottom, #00CDA2, #00CDA2) left bottom no-repeat,
        linear-gradient(to left, #00CDA2, #00CDA2) right bottom no-repeat,
        linear-gradient(to left, #00CDA2, #00CDA2) right bottom no-repeat;
    ;
      background-size: 18px 6px, 6px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title2 {
        margin-top: 5px;
        font-size:50px;
        font-family:Source Han Sans CN;
        font-weight:200;
        color:#00CDA2;
      }
      .num2 {
        font-size:26px;
        font-family:Source Han Sans CN;
        font-weight:500;
        color:rgba(0,205,162,1);
      }
    }
  }
  .panel-group {
    margin-top: 24px;
    margin-left: 5px;
    .card-panel-col {
      margin-bottom: 32px;
    }

    .card-panel {
      height: 145px;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: #ff00ff;

     .card-img{
       position: relative;
       height: 125px;
       width: 125px;
       margin-left: 20px;
       float:left;
       border-color: #4AB7BD;
       border: 6px;
       border-radius: 10px;

       .card-img-inf{
         position:relative;
         margin-top: 1px;
         font-size: 15px;
         color: #4AB7BD;
       }
     }

      .card-panel-description {
        position: relative;
        float: right;
        font-weight: bold;
        margin: 16px;
        margin-left: 0px;

        .card-panel-text {
          line-height: 18px;
          color: #ffffff;
          font-size: 15px;
          margin-bottom: 14px;
          margin-left: 50px;
        }

        .card-panel-num {
          font-size: 20px;
          color:#4AB7BD;
        }
      }
    }
  }
/*.ButtonStyle{*/
  /*position:relative;*/

  /*.Button{*/
    /*position:absolute;*/
    /*width: 95%;*/
    /*height:95%;*/
    /*box-shadow:3px 3px 5px black inset;*/
    /*background-color: #009bfe;*/

  /*}*/
/*}*/
  * {
    box-sizing: border-box;
  }

  html {
    height: 100%;
    background-color: #111;
    font-size: 10px;
  }

  body {
    background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent);
    background-size: 7rem 7rem;
    background-position: -5.2rem -5.2rem;
    width: 50%;
    height: 50%;
    position: relative;
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
  }
  .lizi{
    position: absolute;
    z-index: 0;
    width: 100%;
  }

  @keyframes radar-beam {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .seamless-warp {
    height: 229px;
    overflow: hidden;
  }
 #allmap{
    height: 100%;
    width: 100%;

    position:center;
  }
  .BMap_cpyCtrl {
    display: none;
  }
  .anchorBL {
    display: none;
  }
  #text{
    -webkit-text-fill-color:white
  ;
  }
  .select{
    color: white;
  }
  .hello{
    // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
    /deep/ input::-webkit-input-placeholder {
      color: #fff;
    }
    /deep/  input::-moz-input-placeholder {
      color: #fff;
    }
    /deep/  input::-ms-input-placeholder {
      color: #fff;
    }


    //修改的是el-input的样式
    //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
    //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
    /deep/ .el-select,
    /deep/ .el-input,
    /deep/ .el-input__inner{
      background-color:unset;
      color:#fff;
      border:0px;
      border-radius:0px;
      text-align: center;
    }
  }
  .map1,.map2, .map3{ position:absolute; opacity: .5}
  .map1{ margin-left:580px;margin-top:230px;z-index: 2;  animation: myfirst2 15s infinite linear;}
  .map2{ margin-left:625px;margin-top:275px;z-index: 3; opacity: 0.2; animation: myfirst 10s infinite linear;}
  .map3{ margin-left:650px;margin-top:300px;z-index: 1;}
  @keyframes myfirst2
  {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
  }

  @keyframes myfirst
  {
    from {transform: rotate(0deg);}
    to {transform: rotate(-359deg);}
  }
</style>
